<template>
<div>
  <div class="loading" v-show="lastLoading">
      <div class="loadingbox">
        <img src="../assets/img/loading.gif" />
      </div>
    </div>
  <el-carousel @change="bannerChange" :interval="time" indicator-position="none" class="swiper">
    <el-carousel-item>
      <yearContrast v-if="index == 0"></yearContrast>
    </el-carousel-item>
    <!-- <el-carousel-item>
      <year v-if="index ==1"></year>
    </el-carousel-item>
    <el-carousel-item>
      <quarter v-if="index ==2"></quarter>
    </el-carousel-item>
     <el-carousel-item>
      <month v-if="index ==3" ></month>
    </el-carousel-item>
    <el-carousel-item>
      <week v-if="index ==4"></week>
    </el-carousel-item>
    <el-carousel-item>
      <day v-if="index ==5"></day> -->
    </el-carousel-item> 
  </el-carousel>
</div>
</template>
<script>
import {time} from './config.js'
import yearContrast from '../components/banner/yearContrast'
import year from '../components/banner/year'
import quarter from '../components/banner/quarter'
import month from '../components/banner/month'
import week from '../components/banner/week'
import day from '../components/banner/day'
import { mapGetters } from "vuex";
import { mapMutations } from 'vuex'
export default {
  name:'swiperss',
  components: {
    yearContrast,
    year,
    quarter,
    month,
    week,
    day
  },
	data(){
		return{	
      time: 15000,
      index: 0,
      show:false,
		}
  },
  created(){
    this.time = time
  },
  computed: {
    ...mapGetters(["lastLoading"])
  },
	methods:{
    bannerChange(val){
      setTimeout(() => {
      this.index = val;
      },0)
      console.log(this.index);
    },

  }
}
</script>
<style lang="scss" scoped>

.swiper{
  overflow: hidden;
  height: 93.5vh;
  /deep/ .el-carousel__container{
    height: 100%;
    .el-carousel__arrow--left{
      background: url('../assets/img/btn_left.png');
      width:48px;
      height:48px;
      border-radius: 0%;
      left: 0px;
      .el-icon-arrow-left{
        display: none;
      }
    }
  }
  /deep/ .el-carousel__container{
    height: 100%;
    .el-carousel__arrow--right{
      background: url('../assets/img/btn_right.png');
      width:48px;
      height:48px;
      border-radius: 0%;
      right: 0px;
      .el-icon-arrow-right{
        display: none;
      }
    }
  }
}
.loading{
    position: fixed;
    left: 0;
    top: 0;
    font-size: 16px;
    z-index: 100000000;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    text-align: center;
    .loadingbox{
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
      img{
        width:40px;
      }
    }
  }
</style>
